<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
  display: grid;
}

.wrapper > div{
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
    </style>
</head>
<body>
    <!-- 什么是网格：
网格是一组相交的水平线和垂直线，它定义了网格的列和行。

网格容器：
我们通过在元素上声明 display：grid(生成块级网格) 或 display：inline-grid(生成行内网格)来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格元素。 -->

<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
 </div>


</body>
</html>